﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>书籍列表</title>
    <link rel="stylesheet" type="text/css" th:href="@{/manager/easyui/themes/default/easyui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/manager/easyui/themes/icon.css}">
    <script type="text/javascript" th:src="@{/manager/easyui/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/manager/easyui/jquery.easyui.min.js}"></script>
    <script type="text/javascript">

        
        //工具栏
        var toolbar = [{
            text: '修改',
            iconCls: 'icon-edit',
            handler: function () {
                $('#dd').dialog('open');


            }
        }, '-', {
            text: '启用',
            iconCls: 'icon-ok',
            handler: function () {

                let row = $('#booklist').datagrid("getSelected");
                // alert(row.id)
                location.href="/manager/book/modifyBookFlag?flag=2&id="+row.id;

            }
        }, '-', {
            text: '禁用',
            iconCls: 'icon-cancel',
            handler: function () {
                let row = $('#booklist').datagrid("getSelected");
                // alert(row.id)
                location.href="/manager/book/modifyBookFlag?flag=1&id="+row.id;
            }
        }];
        $(function () {
            $('#booklist').datagrid({
                title: '书籍列表',
                iconCls: 'icon-save',
                url: '/manager/book/findAll',
                columns: [
                    [
                        {field: 'bookName', title: '名称', width: 100, align: 'center'},
                        {field: 'author', title: '作者', width: 200, align: 'center'},
                        {field: 'price', title: '单价', width: 80, align: 'center'},
                        {field: 'iSBN', title: 'ISBN', width: 200, align: 'center'},
                        {
                            field: 'press', title: '出版社', width: 200, align: 'center',
                            formatter: function (value, row, index) {
                                return row.press.name
                            }
                        },
                        {
                            field: 'supplierList', title: '供货商', width: 500, align: 'center',
                            formatter: function (value, row, index) {
                                var names = "";
                                for (var i = 0; i < row.supplierList.length; i++) {
                                    names += row.supplierList[i].name;
                                    if (i != row.supplierList.length - 1) {
                                        names += ",";
                                    }
                                }
                                return names;
                            }
                        },
                        {
                            field: 'flag',
                            title: '状态',
                            width: 100,
                            align: 'center',
                            formatter: function (value, row, index) {
                                if (value == 0) {
                                    return "审核中"
                                }
                                if (value == 1) {
                                    return "禁用"
                                }
                                if (value == 2) {
                                    return "启用"
                                }
                            }
                        }
                    ]
                ],
                toolbar: toolbar,
                pagination: true,//表示在datagrid设置分页
                pageSize: 5,
                singleSelect: true,
                pageList: [5, 10, 20]
            });

            //初始化查询栏
            $("#submit_search").linkbutton({iconCls: 'icon-search', plain: true})
                .click(function () {
                    $('#dg').datagrid({queryParams: form2Json("searchform")});   //点击搜索
                });

            //初始化修改窗口
            $('#dd').dialog({
                title: 'My Dialog',
                width: 700,
                height: 500,
                closed: true,
                cache: false,
                href: '',
                modal: true,
                iconCls: 'icon-save',
                buttons: [{
                    text: '提交',
                    iconCls: 'icon-ok',
                    handler: function () {
                        alert('ok');
                    }
                }, {
                    text: '关闭',
                    handler: function () {
                        alert('cancel');
                        ;
                    }
                }]
            });


            $("#cb").combobox({
                width:150,
                height:35,
                //指定数据列表,在实际开发中一般不使用data属性，而是使用url属性
                // data:[{"id":0,"name":"liquan0"},{"id":1,"name":"liquan1"},{"id":2,"name":"liquan2"},{"id":3,"name":"liquan3"},{"id":4,"name":"liquan4"}],
                //easyui提供的所有组件中发送请求都是使用了jquery-ajax
                url:'/manager/press/findAll',
                //指定value对应的属性
                valueField:'id',
                //指定文本对应的属性
                textField:'name',
                // onChange:function(newValue,oldValue){
                //     alert(newValue);
                //     alert(oldValue);
                // }
            })



        });



    </script>

    <script th:inline="javascript">
        var msg=[[${msg}]];
        if (msg!=null){
            alert([[${msg}]]);
        }
    </script>
</head>
<body>
<form name="searchform" method="post" action="" id="searchform">
    <td width="70" height="30"><strong>书籍查询：</strong></td>
    <td height="30">
        <input type="text" name="keyword" size=20 placeholder="书籍名称"/>
        <input type="text" name="keyword" size=20 placeholder="ISBN"/>
        <!--<select name="search_type" id="search_type">-->
            <!--<option value="-1">请选择出版社</option>-->
            <!--<option value="be_name">出版社1</option>-->
            <!--<option value="be_intro">出版社2</option>-->
            <!--<option value="be_intro">出版社3</option>-->
        <!--</select>-->


        <input id="cb" value="请选择出版社">


        <select name="search_type" id="search_type">
            <option value="-1">请选择供应商</option>
            <option value="be_name">供应商1</option>
            <option value="be_intro">供应商2</option>
            <option value="be_intro">供应商3</option>
        </select>
        编辑推荐:<input type="checkbox" name="" value=""/>
        本周精选:<input type="checkbox" name="" value=""/>
    </td>
    <td>
        <a id="submit_search">搜索</a>
    </td>
</form>
<table id="booklist"></table>
<div id="dd">
    <div align="center" style="margin-top: 30px">
        <form id="ff" method="post">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" style="width:50%" data-options="label:'书籍名称:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="email" style="width:50%"
                       data-options="label:'单价:',required:true,validType:'email'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="subject" style="width:50%"
                       data-options="label:'团购价:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="message" style="width:50%;height:60px"
                       data-options="label:'书籍简介:',multiline:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="message" style="width:50%;height:60px"
                       data-options="label:'作者简介:',multiline:true">
            </div>
            <div style="margin-bottom:20px">
                封面图片:&nbsp;&nbsp;&nbsp;&nbsp; <input type="file"/>
            </div>
            <div style="margin-bottom:20px">
                编辑推荐:<input type="checkbox" name="" value=""/>
                本周精选:<input type="checkbox" name="" value=""/>
            </div>

        </form>
    </div>
</div>
</body>
</html>